<template>
  <div class="comments">
    <!-- 评论 -->
    <div class="top">
      <div class="ping-number">买家评价1</div>
      <div class="more" @click="$router.push('/detail_commit')">更多></div>
    </div>
    <div class="user">
      <img src="" alt="" />

      <span class="name"> admin </span>
      <div class="leirong">评价内容</div>

      <div class="news">
        <div class="updatetime">更新时间:{{ nowDate }}</div>
        <span>默认尺寸</span>
      </div>
    </div>
    <div class="store">
      <div class="name">
        <img src="@/assets/images/detail/1.jpg" alt="" />
        <p>衣依美舍女装</p>
      </div>
    </div>
    <div>
      <ul class="total">
        <li>
          <p>437</p>
          <p>总销量</p>
        </li>
        <li class="center">
          <p>437</p>
          <p>全部宝贝</p>
        </li>
        <li>
          <div><span>描述相符</span><span class="tong">4</span><span class="yang">高</span></div>
          <div><span>价格合理</span><span class="tong">4</span><span class="yang">高</span></div>
          <div><span>质量满意</span><span class="tong">4</span><span class="yang">高</span></div>
        </li>
      </ul>
    </div>
    <div>进店逛逛</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowDate: null,
      nowtimer: "",
    };
  },
  created() {
    this.nowtimer = setInterval(this.gettime, 1000);
  },
  methods: {
    gettime() {
      this.nowDate = new Date().toLocaleString();
    },
  },
};
</script>
 
<style lang = "less" scoped>
* {
  text-decoration: none;
}
.comments {
  width: 100%;
  border-bottom: 5px solid rgb(229, 226, 226);
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 2%;
    padding: 4% 2%;
    font-size: 3vw;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .user {
    margin: 2% 2%;
    img {
      background: palegoldenrod;
      width: 9vw;
      height: 9vw;
      border-radius: 50%;
      overflow: hidden;
    }
    .leirong {
      margin: 4% 3%;
      color: #777777;
    }
    .news {
      display: flex;
      font-size: 2.6vw;
      color: #999999;
      margin: 3%;

      span {
        margin-left: 2%;
      }
    }
  }
  .store {
    .name {
      margin: 0 2%;
      display: flex;
      justify-content: start;
      align-items: center;
      margin-top: 10vw;
      img {
        width: 10vw;
        height: 10vw;
        vertical-align: middle;
      }
      p {
        margin-left: 3vw;
      }
    }
  }
  .total {
    display: flex;
    justify-content: space-evenly;
    padding-top: 4%;
    align-items: center;
    li{
      text-align: center;
      p{
        line-height: 8vw;
      }
      div{
        height: 8vw ;
        span{
          margin:0 3vw;
        }
        .tong{
          color: green;
           margin:0 1vw;
        }
        .yang{
          color: #fff;
          background: green;
           margin:0 1vw;
        }
      }
    }
    .center{
      height: 16vw;
      padding-right: 6vw;
      box-sizing: border-box;
      border-right:1px solid #999999 ;
    }
    
  }
}
</style>